<template>
  <div class="cover-container h-[100%]">
    <div
      class="upload flex flex-s flex-col gap-4"
      vertical
      @drop="drop"
      @dragover="(e: DragEvent) => e.preventDefault()"
    >
      <div>
        <img :src="uploadPng" width="120" />
      </div>
      <div class="system__subtitle text-16">拖拽文件到此上传</div>
      <div>
        <a-button class="upload-button" block size="large" @click="fileUpload" type="primary">
          上传
        </a-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useUploadFile, toBase64 } from '@/utils/file/file';
import { cropperImage, downloadConfig, cropperMode } from '../data/data';
import uploadPng from '../assets/upload.png';

const fileUpload = async () => {
  const files = await useUploadFile({
    accept: 'image/*',
  });
  const file = files[0];
  if (file) {
    cropperImage.value = await toBase64(file);
  }
  downloadConfig.value.exportName = file.name;
  cropperMode.value = 'edit';
};

const drop = async (e: DragEvent) => {
  e.preventDefault();
  const files = e.dataTransfer?.files;
  if (files && files.length > 0) {
    const file = files[0];
    cropperImage.value = await toBase64(file);
  }
  cropperMode.value = 'edit';
};
</script>

<style lang="scss" scoped>
.cover-container {
  border: 2px dashed var(--border-color);
  .upload {
    height: 100%;
    border-radius: var(--radius);
  }
}
</style>
